<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "../jquery-1.7.2.js"></script>
    <script type = "text/javascript">
        $(function(){
            $("#checkedAllBtn").click(function(){
                $(":checkbox").prop("checked",true);
            })
            $("#checkedNoBtn").click(function(){
                $(":checkbox").prop("checked",false);
            })
            $("#checkedRevBtn").click(function(){
                $(":checkbox[name = 'items']").each(function() {
                    this.checked = !this.checked;
                })
                    var checkedCount =$(":checkbox[name = 'items']:checked").length;
                    var checkedAllCount = $(":checkbox[name = 'items']").length;
                    if(checkedCount == checkedAllCount)
                        $("#checkedAllBox").prop("checked",true);
                    else
                        $("#checkedAllBox").prop("checked",false);
            })

            $("#sendBtn").click(function(){
                $(":checkbox[name = 'items']:checked").each(function(){
                    alert(this.value);
                })
            })
            $(":checkbox[name = 'items']").click(function(){
                var allCount = $(":checkbox[name = 'items']:checked").length;
                var allcheckedCount = $(":checkbox[name = 'items']").length;
                $("#checkedAllBox").prop("checked",allCount == allcheckedCount);
            })
            $("#checkedAllBox").click(function (){
                $(":checkbox[name = 'items']").prop("checked",this.checked);

            })
        })
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全 选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反 选" />
    <input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>